<template>
  <button
    :class="['my-btn', type, {active}]"
  ><slot></slot></button>
</template>

<script>
export default {
  name: 'MyButton',
  props: {
    type: {
      default: 'primary',
      validator(value) {
        return [
          'primary',
          'success',
          'danger',
          'warning'
        ].includes(value);
      }
    },
    active: {
      default: false,
      type: Boolean
    }
  }
}
</script>

<style lang="less" scoped>
  .my-btn {

    &.primary {
      background-color: blue;
      color: #fff;
    }

    &.success {
      background-color: green;
      color: #fff;
    }

    &.danger {
      background-color: orange;
      color: #fff;
    }

    &.warning {
      background-color: red;
      color: #333;
    }

    &.active {
      background-color: #fff;
      color: #333;
    }
  }
</style>